<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../tf-event-dashboard/tf-event-dashboard.html">
<link rel="import" href="../tf-histogram-dashboard/tf-histogram-dashboard.html">
<link rel="import" href="../tf-image-dashboard/tf-image-dashboard.html">
<link rel="import" href="../tf-graph-dashboard/tf-graph-dashboard.html">
<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
<link rel="import" href="../tf-backend/tf-backend.html">

<!--
tf-tensorboard is the frontend entry point for TensorBoard.

It implements a toolbar (via paper-header-panel and paper-toolbar) that
allows the user to toggle between various dashboards.
-->
<dom-module id="tf-tensorboard">
  <template>
    <paper-header-panel>
      <paper-toolbar id="toolbar">
        <div id="toolbar-content">
          <div class="toolbar-title">TensorBoard</div>
          <paper-tabs selected="{{modeIndex}}" noink class="tabs" id="tabs">
            <paper-tab data-mode="events">Events</paper-tab>
            <paper-tab data-mode="images">Images</paper-tab>
            <paper-tab data-mode="graphs">Graph</paper-tab>
            <paper-tab data-mode="histograms">Histograms</paper-tab>
          </paper-tabs>
        </div>
      </paper-toolbar>
      <div id="content" class="fit">
        <template is="dom-if" if="[[eventDashboard(mode)]]">
          <tf-event-dashboard
            id="eventDash"
            backend="[[_backend]]"
            router="[[router]]"
          ></tf-event-dashboard>
        </template>

        <template is="dom-if" if="[[imageDashboard(mode)]]">
          <tf-image-dashboard
            id="imageDash"
            backend="[[_backend]]"
          ></tf-image-dashboard>
        </template>

        <template is="dom-if" if="[[graphDashboard(mode)]]">
          <tf-graph-dashboard
            id="graphDash"
            backend="[[_backend]]"
            router="[[router]]"
          ></tf-graph-dashboard>
        </template>

        <template is="dom-if" if="[[histogramDashboard(mode)]]">
          <tf-histogram-dashboard
            id="histogramDash"
            backend="[[_backend]]"
          ></tf-histogram-dashboard>
        </template>
      </div>
    </paper-header-panel>
    <style>
      :host {
        height: 100%;
        display: block;
        background-color: var(--paper-grey-100);
      }

      #toolbar {
        background-color: var(--tb-orange-strong);
        -webkit-font-smoothing: antialiased;
      }

      #toolbar-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .toolbar-title {
        font-size: 20px;
        margin-left: 10px;
        text-rendering: optimizeLegibility;
        letter-spacing: -0.025em;
        font-weight: 500;
      }

      #content {
        height: 100%;
      }

      .tabs {
        width: 400px;
        text-transform: uppercase;
        height: 100%;
      }

      paper-tabs {
        --paper-tabs-selection-bar-color: white;
      }

    </style>
  </template>
  <script>
    Polymer({
      is: "tf-tensorboard",
      properties: {
        router: {
          type: Object,
          value: function() {return TF.Backend.router()},
        },
        _backend: {
          type: Object,
          computed: "_makeBackend(router)",
        },
        // Which tab is selected (events, graph, images etc).
        mode: {
          type: String,
          computed: '_getModeFromIndex(modeIndex)'
        },
        // If true, tab switching in TensorBoard will not update
        // location hash. Hash update interferes with selenium tests.
        noHash: {
          type: Boolean,
          value: false
        }
      },
      _getModeFromIndex: function(modeIndex) {
        var mode = this.tabs[modeIndex];
        if (!this.noHash) {
          window.location.hash = mode;
        }
        return mode;
      },
      _makeBackend: function(router) {
        return new TF.Backend.Backend(router);
      },
      eventDashboard: function(mode) {
        return mode === "events";
      },
      imageDashboard: function(mode) {
        return mode === "images";
      },
      graphDashboard: function(mode) {
        return mode === "graphs";
      },
      histogramDashboard: function(mode) {
        return mode === "histograms";
      },
      ready: function() {
        this.tabs = [].slice.call(this.querySelectorAll('paper-tab')).map(function(a) {
          return a.dataset.mode;
        });
        this._getModeFromHash();
        window.addEventListener('hashchange', function() {
          this._getModeFromHash();
        }.bind(this));
      },
      _getModeFromHash: function() {
        // Return the mode as it is stored in the hash.
        var tabName = window.location.hash.trim().slice(1);
        var modeIndex = this.tabs.indexOf(tabName);
        if (modeIndex == -1 && this.modeIndex == null) {
          // Selecting the first tab as default.
          this.set('modeIndex', 0);
        }
        if (modeIndex != -1 && modeIndex != this.modeIndex) {
          this.set('modeIndex', modeIndex);
        }
      },
    });
  </script>
</dom-module>
